<html>
<head>
	<meta charset="UTF-8">
	<title>Connect 4!</title>
	<link rel="stylesheet" href="style.css" />
	<script src="game.js"></script>
	<script src="mcts.pure.js"></script>
	<script>
		let game = new Connect4();
		let ai = new Connect4AI('medium');
		
		//生成空表，作为棋盘
		function getTable() {
			let table = document.createElement('table');
			for(let i of [...Array(game.height).keys()]){
				let tr = document.createElement('tr');
				for(let j of [...Array(game.width).keys()]){
					let td = document.createElement('td');
					td.id = `${i * game.width + j}`;
					td.addEventListener('click',draw);
					tr.appendChild(td);
				}
				table.prepend(tr);
			}
			return table;
		}
		
		//获取点击按钮，悔棋、重开等
		function getButton(title, perform) {
			let button = document.createElement('button');
			button.addEventListener('click', perform);
			button.className = 'button';
			button.innerHTML = title;
			return button;
		}
		
		//落子
		function draw(e) {
			let target = parseInt(e.target.id);
			let action = target % game.width;
			if(game.getLegalActions().some(item => item === action)	&& !game.isTerminal() ){
				game.performAction(action);
				updateUI();
				moveAI();
				setTimeout(updateUI,500);
			}
		}
		
		//悔棋
		function back(){
			if(game.history.length > 1){
				let remove = game.history.pop();
				game.board[remove] = 0;
				remove = game.history.pop();
				game.board[remove] = 0;
				updateUI();
			} else {
				alert('无法悔棋');
			}
		}
		
		//重开
		function restart(){
			game = new Connect4();
			let diffculty = document.querySelector('select').value; //难度等级输入框的值
			ai = new Connect4AI(diffculty);
			//玩家先手还是电脑先手
			let first = document.querySelectorAll('input[name="set"]:checked')[0].value; 
			if( parseInt(first) !== game.getCurrentPlayer() )
				moveAI();
			updateUI();
		}
		
		//AI走子
		function moveAI(){
			if (!game.isTerminal()) {
				// 获取AI移动
				const aiMove = ai.getMove(game);
				if (aiMove !== null) {
					game.performAction(aiMove);
				}
			}
		}
		
		//更新界面
		function updateUI() {
			//棋盘显示
			for(let i = 0; i< game.board.length; i++){
				document.getElementById(`${i}`).className = 
					game.board[i] === 0?'':game.board[i] === 1?'black':'white';
			}
			//上部提示
			document.querySelector('#hint').innerHTML = 
				game.isTerminal()?
					game.getResult() === 1e-4?'平局':
						game.getResult() === 1?'黑子赢了':'白子赢了':
					game.getCurrentPlayer() === 1?'黑子下棋':'白子下棋'
		}
		
		window.onload = () => {
			let table = getTable();
			let regret = getButton('悔棋', back);
			let reset = getButton('重开', restart);
			let hint = document.createElement('div');
			let buttons = document.createElement('div');
			
			hint.id = 'hint';

			document.body.appendChild(hint);
			document.body.appendChild(table);
			document.body.appendChild(buttons);
			buttons.appendChild(regret);
			buttons.appendChild(reset);
			updateUI();
		}
	</script>
</head>
<body>
	<div>AI难度：
		<select name="diffculty">
			<option value="easy">简单</option>
			<option value="medium" selected>中等</option>
			<option value="hard">较难</option>
		</select>
	</div>
	<div>
		玩家先手<input name="set" type="radio" value=1 checked />
		AI先手<input name="set" type="radio" value=-1 />
	</div>
</body>
</html>
